/*
 * 课程
 */
import * as React from 'react';
import { connect } from 'react-redux';
import ReactCustomScrollBars from 'react-custom-scrollbars';
import { get } from 'lodash';

import { fetchCourseList, updateCoursePublish } from 'actions/course';

import { message, Modal, Icon, Dropdown, Menu, Row, Col } from 'antd';

import './Index.scss';

import LoadableComponent from 'components/common/LoadableComponent';
const LoadableCourseList = LoadableComponent(() => import('pages/course/List'));
const LoadableCourseEdit = LoadableComponent(() => import('pages/course/Edit'));
const LoadableLessonEdit = LoadableComponent(() => import('pages/lesson/Edit'));

// editCourseId: 0表示弹窗新增课程，其他数值则表示编辑课程
interface CourseIndexProps {
  dispatch: (action: any) => any;
}

interface CourseIndexState {
  lesson: any;
  editCourse: any;
}

class CourseIndex extends React.Component<CourseIndexProps, CourseIndexState> {
  static defaultProps: CourseIndexProps = {
    dispatch: () => {},
  };
  constructor(props: CourseIndexProps) {
    super(props);

    this.state = {
      editCourse: null,
      lesson: {
        lessonId: null,
        courseId: 0,
        courseName: '',
      },
    };
  }

  // editCourse: 0 | CourseModal
  handleEditCourse = (editCourse: any = 0) => {
    this.setState({
      editCourse,
    });
  };
  handleCourseCancel = () => {
    this.setState({
      editCourse: null,
    });
  };
  handleFetchCourses = () => {
    const { dispatch } = this.props;
    dispatch(fetchCourseList());
  };

  handleEditLesson = (lesson: object) => {
    this.setState({
      lesson,
    });
  };

  // 课程新增或修改完后的回调
  handleCourseSubmit = () => {
    this.handleFetchCourses();
    this.handleCourseCancel();
  };

  // 课程发布
  handleCoursePublish = (checked: boolean) => {
    const { editCourse } = this.state;
    const { dispatch } = this.props;
    if (!editCourse) {
      return;
    }

    const isPublished = Number(checked);
    const content = checked ? '课程上线' : ' 课程下线';
    Modal.confirm({
      title: '危险，慎重操作',
      content,
      okText: '确定',
      cancelText: '取消',
      iconType: 'info-circle',
      onOk: () => {
        dispatch(updateCoursePublish(editCourse.id, isPublished)).then((result: any) => {
          if (result.code) {
            message.error(result.msg);
          } else {
            message.success('操作成功');
            this.handleFetchCourses();
            this.handleCourseCancel();
          }
        });
      },
    });
  };

  render() {
    const { lesson, editCourse } = this.state;

    const courseEditOperation = (
      <Menu>
        <Menu.Item key="0" style={{ padding: '10px 18px' }}>
          <a
            onClick={() => {
              this.handleEditCourse(0);
            }}>
            <Icon type="plus" />添加课程级别
          </a>
        </Menu.Item>
      </Menu>
    );

    return (
      <div id="panel_content-course">
        {editCourse !== null && (
          <LoadableCourseEdit
            editCourse={editCourse}
            onOk={this.handleCourseSubmit}
            onPublish={this.handleCoursePublish}
            onCancel={this.handleCourseCancel}
          />
        )}

        <Row>
          <Col span={5}>
            <div className="course-operation-section">
              &nbsp;&nbsp;&nbsp;&nbsp;课程级别
              <Dropdown overlay={courseEditOperation}>
                <a href="javascript:void(0);">
                  <Icon type="ellipsis" />
                </a>
              </Dropdown>
            </div>
            <ReactCustomScrollBars
              id="course_list_side"
              className="scroll-bar"
              autoHide={true}
              autoHeight={false}
              autoHideTimeout={600}
              autoHideDuration={400}>
              <div className="panel-content">
                <LoadableCourseList
                  handleEditCourse={this.handleEditCourse}
                  handleEditLesson={this.handleEditLesson}
                  lesson={lesson}
                />
              </div>
            </ReactCustomScrollBars>
          </Col>
          <Col span={19}>
            <div id="course_edit_side">
              {lesson.lessonId !== null && (
                <LoadableLessonEdit
                  lessonId={lesson.lessonId}
                  courseId={lesson.courseId}
                  courseName={lesson.courseName}
                  handleEditLesson={this.handleEditLesson}
                />
              )}
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}

export default connect()(CourseIndex);
